<template>
  <page-frame>
    <div class="newRegistration">
      <div class="toptitle">
        <div class="left">出入登记-{{title}}</div>
        <div class="right">
          <div class="btns">
            <el-button v-show="isAdd" @click="entry('ruleForm')" class="lightGreenBtn button-style">保存</el-button>
            <el-button @click="back" class="button-style">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px">
          <el-row >
            <el-col :span="12">
              <el-form-item label="会员姓名" v-show="isAdd">
                <el-autocomplete  v-model="memberView.memberName" :fetch-suggestions="querySearchAsync" placeholder="会员姓名" @select="handleSelect"></el-autocomplete>
              </el-form-item>
              <el-form-item label="会员姓名" v-show="!isAdd">
                <el-input disabled  v-model="ruleForm.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员编号">
                <el-input v-model="ruleForm.memberNo" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="照护等级">
                <el-input v-model="ruleForm.lId" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="床位编号">
                <el-input v-model="ruleForm.bed" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预计离院起止时间" prop="time">
                <el-date-picker
                  :disabled="!isAdd"
                  v-model="ruleForm.time"
                  @change="getLeavePeriod"
                  type="daterange"
                  format="yyyy/MM/dd"
                  placeholder="选择预计离院起止时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="离院天数">
                <el-input :disabled="!isAdd" v-model="ruleForm.leavePeriod" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="陪同人电话" prop="sibPhone"  class="formItem">
                <el-input :disabled="!isAdd" v-model="ruleForm.sibPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="陪同人姓名"  prop="escort" class="formItem">
                <el-input :disabled="!isAdd" v-model="ruleForm.escort"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="与会员关系" prop="relation">
                <el-select v-model="ruleForm.relation"
                           :disabled="!isAdd">
                  <el-option
                    v-for="item in CONSTANT_MEMBER_RELATIVES_OPTION"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" >
              <el-form-item label="外出原因">
                <el-input
                  :disabled="!isAdd"
                  type="textarea"
                  :autosize="{minRows:4,maxRows:4}"
                  placeholder="请输入原因"
                  v-model="ruleForm.reason"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="!isAdd">
            <el-col :span="12">
              <el-form-item label="实际返院时间">
                <el-date-picker
                  disabled
                  v-model="ruleForm.backTime"
                  type="date"
                  :picker-options="pickerOptions0"
                  placeholder="选择实际返院时间"
                  align="right">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--<div>{{$data.ruleForm}}</div>-->
      </div>
    </div>
  </page-frame>
</template>

<script>
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  import common from '../../config/common'
  import {CONSTANT_MEMBER_RELATIVES_OPTION} from '../../config/constant'

  export default {
    data () {
      return {
        title:'新增登记',
        isAdd:true,
        currentEntryId:0,
        CONSTANT_MEMBER_RELATIVES_OPTION,
        memberView:{
          "memberName": ""
        },
        ruleForm: {
          eBackTime: "",
          escort: "",
          leavePeriod: null,
          bed:null,
          time:[],
          leaveTime: new Date(),
          memberId:null,
          lId:null,
          reason: "",
          relation: null,
          sibPhone: "",
          memberNo:null,
          backTime:"",
          bed: "",
          createTime: "",
          memberName: "",
        },
        rules: {
          sibPhone:[{ required: true, message: '请输入陪同人电话', trigger: 'blur'}],
          escort:[{ required: true, message: '请输入陪同人姓名', trigger: 'blur'}],
          relation:[{type:'number', required: true, message: '请选择与会员关系', trigger: 'change' }]
        },
        pickerOptions0: {
          disabledDate(time) {
            console.log(time);
            return time.getTime() < this.ruleForm.leaveTime.getTime();
          }
        },
        members:[],
      }
    },
    methods: {
      init() {
        if(this.$route.params.entryId=="0"){//新增等级
          this.title = '新增登记';
          this.isAdd = true;
          this.getAllMember();
        }else{//详情
          this.title = '详情';
          this.isAdd = false;
          this.currentEntryId = this.$route.params.entryId;
          this.getMemberByEntryId();
        };
      },
      /**
       * 根据EntryId获取会员信息
       */
      getMemberByEntryId(){
        let self = this;
        outRegistrationApi.getMemberByEntryId(this.currentEntryId).then(function (response) {
          self.ruleForm = response.body.data;
          self.ruleForm.time=[];
          self.ruleForm.time[0] = self.ruleForm.createTime;
          self.ruleForm.time[1] = self.ruleForm.eBackTime;

        })
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        outRegistrationApi.getAllMemberInfor(self.memberView).then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
      /**
       * 获得离职天数
       */
      getLeavePeriod(){
        this.ruleForm.leaveTime = this.ruleForm.time[0];
        this.ruleForm.eBackTime = this.ruleForm.time[1];
        var date1 = new Date(this.ruleForm.leaveTime);
        var date2 = new Date(this.ruleForm.eBackTime);
        var s1 = date1.getTime(),s2 = date2.getTime();
        var total = (s2 - s1)/1000;
        var day = parseInt(total / (24*60*60));//计算整数天数
        this.ruleForm.leavePeriod = day;
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        console.debug(cb);
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
          console.debug(results);
        }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
       // this.memberInfor = item;
        this.ruleForm.memberId = item.memberId;
        this.ruleForm.bed = item.bedNo;
        this.ruleForm.lId = item.lidName;
        this.ruleForm.memberNo = item.memberNo;
      },
      /**
       * 提交表单
       */
      entry(formName){
        let self = this;
        self.ruleForm.leaveTime = self.ruleForm.time[0];
        self.ruleForm.eBackTime = self.ruleForm.time[1];
        self.ruleForm.eBackTime = common.formatDate(self.ruleForm.eBackTime);
        self.ruleForm.leaveTime = common.formatDate(self.ruleForm.leaveTime);
        if(self.memberView.memberName != ""){
          self.$refs[formName].validate((valid) => {
            if (valid) {
              outRegistrationApi.entry(self.ruleForm).then(function () {
                self.$message({
                  message: '保存成功',
                  type: 'success'
                });
                self.$router.push({name: 'inAndOutRegistration'});
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }else{
          self.$message({
            type: 'warning',
            message: '请填写会员姓名'
          });
        }
      },
      back(){
        this.$router.push({name: 'inAndOutRegistration'});
      },
    },
    watch:{

    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .newRegistration .button-style {
    width: 90px;
  }
  .newRegistration .file-content{
    width:80%;
    margin:0 auto;
  }
  .newRegistration .el-textarea{
    width:91%!important;
  }
  .newRegistration .el-autocomplete{
    width: 100%!important;
  }
</style>
